<template>
  <div>
    <div class="con" :class="state.thresholdStatus">
      <span
        v-show="state.showData"
        :class="`threshold-value-${state.thresholdStatus}`"
      >
        {{ (Math.round(state.value * 100) / 100).toFixed(2) }}{{ state.suffix }}
        <i
          :class="`fa fa-long-arrow-${
            state.upAndDown
          } arrowColorR threshold-value-${
            state.value > 0 ? 'positive' : 'negative'
          }`"
        ></i>
      </span>
      <span v-show="!state.showData"> - </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, watch, getCurrentInstance, nextTick } from "vue";
import { onBeforeRouteUpdate } from "vue-router";

const props = defineProps({
  suffix: String,
  modelValue: Number,
});

const { proxy } = getCurrentInstance() as any;
const state = reactive({
  upAndDown: "up",
  value: 0,
  thresholdStatus: "default",
  showData: true,
  suffix: "",
  result: 0,
});

const init = (): void => {
  state.value = props.modelValue;
  state.suffix = props.suffix;
  if (isNaN(state.value) || state.value == null) {
    state.showData = false;
    return;
  } else {
    state.showData = true;
  }
  render();
};
const render = () => {
  if (state.value > 10) {
    state.thresholdStatus = "positive";
    state.upAndDown = "up";
  }
  if (state.value <= 10 && state.value >= -10) {
    if (state.value <= 10 && state.value >= 0) {
      state.thresholdStatus = "defaultUp";
    } else if (state.value >= -10 && state.value <= 0) {
      state.thresholdStatus = "defaultDown";
    }
    state.value > 0 ? (state.upAndDown = "up") : (state.upAndDown = "down");
  }
  if (state.value < -10) {
    state.thresholdStatus = "negative";
    state.upAndDown = "down";
  }
};
onMounted(() => {
  init();
});

watch(
  () => props.modelValue,
  () => {
    init();
  }
);
</script>

<style scoped>
.threshold-value-negative {
  color: #67c23a;
}

.threshold-value-positive {
  color: #f56c6c;
}

.threshold-value-defaultUp {
  color: #808080;
}
.threshold-value-defaultDown {
  color: #808080;
}
.con {
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 500;
}
.negative {
  background: rgb(230, 244, 234);
}
.positive {
  background: rgb(252, 232, 230);
}
.defaultUp {
  background: rgb(255, 244, 243);
  border: 1px solid rgb(252, 232, 230);
}
.defaultDown {
  background: rgb(232, 243, 235);
  border: 1px solid rgb(230, 244, 234);
}
</style>
